<template>
  <div>
    <el-group-title title="" class="ccui-group-wrapper d_jump" index="contract">
      <template slot="groupTitle">
        <el-form
          :model="form"
          :rules="rules"
          ref="form2"
          label-width="160px"
          class="ccui-form"
          style="overflow:visible;"
        >
          <!-- <div class="extend-btn">
            <el-upload
              :show-file-list="false"
              :action="uploadUrl"
              class="upload-demo tow"
              :before-upload="beforeAvatarUpload"
              :on-success="onSuccess"
              :on-error="onError"
              :headers="headers"
              :limit="10"
            >
              <el-button plain type="single-number">上传附件</el-button>
            </el-upload>
          </div> -->
          <el-table
            :data="tableData"
            style="margin-bottom:20px;width:100%;"
            border
            max-height="99999"
            class="ccui-form-child-table"
          >
            <el-table-column
              :show-overflow-tooltip="true"
              label="序号"
              type="index"
              min-width="20%"
              height="36px"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="fileName"
              label="文件名称"
              min-width="140%"
            >
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="fileSize"
              label="文件大小"
              min-width="70%"
            >
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="scaleNum"
              label="操作"
              align="center"
              header-align="center"
              appendixInfor.vue
              min-width="70%"
            >
              <template slot-scope="scope">
                <span
                  style="color:#0089EF;cursor:pointer"
                  @click="download(scope.$index, scope.row)"
                  >下载</span
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </template>
    </el-group-title>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import { addUrlPerFix } from "@/basa/utils";
export default {
  name: "attachment",
  data() {
    return {
      form: {
        fileName: "", //合同附件里的文件名称
        fileSize: "", //合同附件里的文件大小
        priceRegion: "", //财务信息里的价格地区
        taxMethod: "", //计税方法
        taxType: "", //发票类型
        placeSign: "", //签订地点
        numberCopies: "", //合同份数
        phonePerson: "", //对方联系人
        taxpayer: "", //供应商纳税人类型
        materialSources: "", //物资来源
        paymentCoefficient: "", //支付系数
        advanceCharge: "", //预付款
        titleAccount: "", //账户名称
        accountNumber: "", //开户行账号
        accountName: "", //开户行名称
        fileArr: []
      },
      rules: {},
      tableData: [],
      uploadUrl: addUrlPerFix(process.env.VUE_APP_UPLOAD_URL), //上传图片
      headers: {
        Authorization: Cookies.get("access_token") || ""
      }
    };
  },
  created() {
    // let storeAppend = JSON.parse(sessionStorage.getItem("addAppendList"));
    // console.log(JSON.parse(sessionStorage.getItem("addAppendList")));
    // this.tableData = storeAppend != null ? storeAppend : [];
    // if (storeAppend === null) return;
    // storeAppend.forEach(item => {
    //   this.form.fileArr.push(item.uploadIds);
    // });
    console.log("附件", this.tableData);
  },
  methods: {
    onSuccess(res) {
      console.log(res);
      let fileData = res.data[0];
      this.tableData.push({
        uploadIds: fileData.uploadId,
        fileName: fileData.fileName,
        fileSize: Math.round(fileData.fileSize / 1024) + "kb"
      });
      // this.tableData.forEach(item => {
      //   this.form.fileArr.push(item.uploadId);
      // });
      // console.log(this.form.fileArr);
      this.form.fileArr.push(fileData.uploadId);
      // sessionStorage.setItem("addAppendList", JSON.stringify(this.tableData));
    },
    onError() {},
    beforeAvatarUpload(file) {
      console.log(file);
    },
    download(i, r) {
      // window.open(
      //   `${addUrlPerFix(
      //     process.env.VUE_APP_BASE_URL
      //   )}/apis/gepma/oss/downloadByUploadId?uploadId=${r.fileInfoId}`
      // );

      // setTimeout(() => {
      //   window.close();
      // }, 500);
      let openUrl = document.createElement("a");
      openUrl.style.display = "none";
      openUrl.href = `${addUrlPerFix(
        process.env.VUE_APP_BASE_URL
      )}/apis/gepma/oss/downloadByUploadId?uploadId=${r.fileInfoId}`;
      openUrl.setAttribute("download", r.fileName);
      document.body.appendChild(openUrl);
      openUrl.click();
    }
  }
};
</script>

<style scoped lang="scss">
/deep/.el-table {
  /deep/th {
    padding: 0;
    height: 36px;
    line-height: 36px;
  }
  .el-table__body {
    .cell {
      height: 36px;
      line-height: 36px;
    }
  }
}
</style>
